<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphael Tooltips</title>
        <script src="../js/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="../js/snap/snap.svg-min.js" type="text/javascript"></script>
        <script src="js/component.svg.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.onload = function () {

 //  var paper = Snap("2000", 2000, 2000);
			Snap.load("test.svg", function(svg) {
				
			    document.getElementById("holder").appendChild(svg.node);
			}, document.getElementById("svghoder"));
return;
			    var width=1000,height=2000;
                var paper = Snap("2000", 2000, 2000);
                // alert(paper.toString);
			//	paper.circle(10, 10, 10).drag();; // is the same as...

               //paper.newmethod();
		     	var mainBus=  paper.busLine(20,0,1000,222);
		   //  	var mainBus1=  paper.busLine(70,150,900,222);
		     	  var bb=mainBus.getBBox();
		     	  var count=3;
		     	  for(var i=1;i<count+1;i++)
		     	  {
                   //变压器位置 按照 1/4 2/4   ,1/6 3/6 5/6 的位置摆放
                   if(i<3)
                   {
		              var transf=   paper.transformer_withBreaker(bb.x+bb.width*(i*2-1)/(count*2),bb.y,1000);
		              var bb1=transf.getBBox();//得到 添加 breaker之后的值
		               var bb2=transf[1].getBBox();//得到 中间变压器的box除了文字之外的值
		              //bb1.x+bb1.width/2 得到bb1的中 间值
		            //      paper.circle(bb1.x+bb2.width/2,bb1.y+bb1.height,10).attr({
                    //        fill: "#f00"
                     //     });



		              var mainBus1=  paper.busLine(bb1.x+bb2.width/2-bb.width/(count*2),bb1.y+bb1.height
		              ,bb.width/count
		              ,222);
		              }else if(i==3){
                            paper.three_transformer_withBreaker(width*3/4,bb.y,345);

		              };


		         }


			   // 获得set集合
			var set = paper.selectAll("path");

			// 遍历填色
			set.forEach(function(element, index) {
			 var id=element.node.id;
			  if(id="fff")
				element.attr({
					fill: ["#fff"]
				});
			});
	//		   r.transformer_withBreaker(width/2,50,345);
	//		  r.transformer_withBreaker(width*2/3,50,345);
/*
               s.forEach(function(){
			   alert(this);
			   });

               var i=0;
              setInterval(function(){

			  var color1=["#ff000","#00ff00"];

			 var el= r.getItemByTitle("asdf");
			 if(el)
			   el.attr({fill:color1[i++%2]});
            },1000);


// $("#add").on("click",function(){
// alert("ok");
// });*/

};

        </script>
    </head>
    <body class="raphael">
	    <div id="tool">
		<input type="button" value="add" id="add"/>
		<label value="asdf" id="debug">aaaa</label>
		</div>
		<div style="width:100%;height:100%"id="svghoder"></div>
        <svg  style="width:100%;height:100%"id="holder"></svg>
    </body>
</html>
